웹개발 및 최신 테크 소식을 전하는 블로그, 웹이즈프리

HOME > css

[CSS] textarea 태그의 overflow 속성 IE8 적용 안되는 문제

Last Modified : 2019-08-21 / Created : 2014-09-03
5,640
View Count
웹페이지를 완료 후 마무리로 크로스 브라우징을 위해 익스플로러를 확인해보니 IE 8에서 수평 스크롤이 안 보이게 하는 overflow가 적용되지 않더군요...다른 브라우저들은 모두 문제 없이 잘 적용되었는데 말이죠.

그래서 생각한 부분이 prefix나 핵을 사용하는 방법이었습니다. IE 8에서 overflow 값을 적용하기 위해 아래처럼 코드를 추가해봤습니다.
-ms-overflow-x: hidden;
*overflow-x: hidden;

하지만 역시나 동작하지 않더군요.. 결국 핵, -ms- 사용만으로는 동작하지 않았습니다.



!  IE 8 해결 방법


결국 해결한 방법은 position 속성을 추가하는 방법입니다. position의 기본값인 static을 relatvie로 변경 후 사용하면 잘 적용됩니다.
position: static // 기본값임

position: relative; // 기본값이 static을 relative로 수정

relative 값을 적용하면 잘 동작합니다. 참고로 인터넷을 찾다보니 jQuery를 통해서 해결이 가능하다는데 해보지는 않았습니다. 그래도 잘 적용되니 다행이네요. 비슷한 이슈가 있으시면 위 방법을 사용해 보시길 바랍니다.

Previous

[CSS] :nth-child() 선택자에 대한 CSS 적용방법, 홀수 및 짝수번째 요소 선택

Previous

[HTML/CSS] 텍스트 수직, 세로방향으로 중앙 정렬하는 다양한 방법 알아보기